<template>
    <div>
        <el-menu :default-active="getChecked" background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse="collapseFlag"
                 :collapse-transition="false">
            <template v-for="item in menu">
                <el-menu-item :index="item.key" v-if="item.children.length === 0" @click="open(item)">
                    <i :class="item.icon"/>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
                <el-submenu :index="item.key" v-else>
                    <template slot="title">
                        <i :class="item.icon"/>
                        <span>{{item.title}}</span>
                    </template>
                    <el-menu-item :index="children.key" :key="children.key" v-for="children in item.children" @click="open(children)">{{children.title}}</el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script src="./Aside.js"/>
<style scoped lang="less" src="./Aside.less"/>
